// 导入创建路由的函数
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
// 1. 定义路由组件.
// 提前导入 直接挂载到对应路由
import NotFound from "../views/NotFound.vue";
// import Statistics from "../views/Statistics.vue";
import Money from "../views/Money.vue";
// import Labels from "../views/Labels.vue";

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes: Array<RouteRecordRaw> = [
  // 提前导入组件的写法
  { path: "/", component: Money },
  // 访问对应路径的时候才导入组件的懒加载方式
  { path: "/money", component: () => import("../views/Money.vue") },
  { path: "/labels", component: () => import("../views/Labels.vue") },
  // 需要携带标签名作为参数进入到"/labels/edit/:para"路由 其中para就是传入的参数
  {
    path: "/labels/edit/:para",
    component: () => import("../views/EditLabel.vue"),
  },

  {
    path: "/statistics",
    component: () => import("../views/Statistics.vue"),
    // /statistics下的子路由 分为两部分 收入信息和支出信息
    children: [
      {
        path: "input",
        component: () => import("../components/Statistics/InputStatistics.vue"),
      },
      {
        path: "output",
        component: () =>
          import("../components/Statistics/OutputStatistics.vue"),
      },
    ],
  },

  // { path: "/labels", component: Labels },
  // { path: "/statistics", component: Statistics },
  { path: "/404", component: NotFound },

  // 删除了 *（星标或通配符）路由#
  // 现在必须使用自定义的 regex 参数来定义所有路由(*、/*)：
  // 现在不能直接用*来匹配不存在的路由
  { path: "/:pathMatch(.*)*", redirect: "/404" }, // 不识别的path自动匹配404
];

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。

  // hash模式（即地址栏 URL 中的 # 符号)。
  // 比如这个 URL：www.123.com/#/test，hash 的值为 #/test。
  // 特点： hash 虽然出现在 URL 中，但不会被包括在 HTTP，因为我们hash每次页面切换其实切换的是#之后的内容，而#后内容的改变并不会触发地址的改变，
  // 所以不存在向后台发出请求，对后端完全没有影响，因此改变 hash 不会重新加载页面。
  // 每次hash发生变化时都会调用 onhashchange事件
  // 优点：可以随意刷新

  // history模式（利用了浏览器的历史记录栈）
  // 特点：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
  // 在当前已有的 back、forward、go的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向后端发送请求。
  // history：可以通过前进 后退控制页面的跳转，刷新是真是的改变url。
  // 缺点：不能刷新，需要后端进行配置。由于history模式下是可以自由修改请求url，当刷新时如果不对对应地址进行匹配就会返回404。
  // 但是在hash模式下是可以刷新的，前端路由修改的是#中的信息，请求时地址是不会变的
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
});

export default router;
